<!DOCTYPE HTML>
<html lang="no" manifest="cache.manifest">
<head>
<!--  Hosted on stud.aitel.hist.no -->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<link rel="stylesheet" type="text/css" href="mobile.css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>

<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script>

<!-- 
http://www.jar2.net/projects/jquery-wheelcolorpicker/demo 
http://eisabainyo.net/weblog/2011/01/31/top-10-jquery-mobile-code-snippets-that-you-need-to-know/
-->
<script type="text/javascript" src="jquery.wheelcolorpicker/jquery.wheelcolorpicker.min.js"></script>

<script type="text/javascript" src="js/modernizr.js"></script>

<script type="text/javascript">
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
function getInternetExplorerVersion()
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

if ( getInternetExplorerVersion() > -1 )
{
  alert("Du bruker IE - ikke supportet i denne versjon");
}
</script>

<script type="text/javascript" src="js/propertystore.js"></script>
<script type="text/javascript" src="js/pagecolor.js"></script>
<script type="text/javascript" src="js/parkdata.js"></script>
<script type="text/javascript" src="js/stats.js"></script>

<script type="text/javascript" src="js/map.js"></script>

<style type="text/css">
/* HTML5-støtte */
header, content, section, footer, aside, nav, article, figure { display: block; }
a:visited {text-decoration:none;color:white;}
a:link {text-decoration:none;color:white;}
body {
	background-color:gray;
}

</style>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>P-hjelpen</title>
<script type="text/javascript">

// Console support hack
if (typeof console == "undefined") {
    this.console = {log: function() {}};
}


jQuery(document).ready(function() {
	 // init and set of localstorage properties
    initPropertyStore();
    // Start the server communication
 	startServerComm();
 	// Show map
 	showMap();
 	
 	// To show the parking locations...
 	updateIcons('P1,50,50;P2,10,10;P3,150,150;P4,250,250');
 	
 	// Set the tag to update the stats on the front page
 	setParkIdUpdate("oversikt");
	//setPage(1);
	keepMapCentered(true);
	initStats();
	visParkStat();
	
	// If the gps pos is checked - check it again...
	initShowPosision();
	 
	 
    $("#filterFlagCheckBox").next('label').click(function(){
    	checkboxFilterClicked();
	});

	$("#chkShowPosisition").change(function(){
		console.log("Changed...");
    	toggleGpsShow(); 
	});
	$("#chkMegISentrum").change(function(){
		console.log("Changed meg...");
    	toggleMegSentrum(); 
	});	

     $("#theme").change(function(){
        setDocumentColor($(this).val());
 	});
  
	// some browsers support downscroll of address bar
	if(navigator.userAgent.match(/Android/i)){
		window.scrollTo(0,1);
	} 

	// Map gps icon
     mapInits();
});

//Checkbox is checked/unchecked
function toggleGpsShow() {
	var domChk = $("#chkShowPosisition")[0];
	var isChecked = $("#chkShowPosisition").is(':checked'); 
	
	console.log("Check 1 : " + isChecked + " : " + SETTINGS_enableLocation);
	if(SETTINGS_enableLocation==0) {
		SETTINGS_enableLocation = 1;
	} else {
		SETTINGS_enableLocation = 0;
	}
	var isChk = (SETTINGS_enableLocation==1 ? true : false);
	console.log("Check 2 : " + isChk + " : " + SETTINGS_enableLocation);
	$("#chkShowPosisition").attr("checked",isChk).checkboxradio("refresh"); 
	
	saveProperties();
	updateGpsTimer(SETTINGS_enableLocation);
}

// Toggle the centering of myself....
function toggleMegSentrum() {
	var domChk = $("#chkMegISentrum")[0];
	var isChecked = $("#chkMegISentrum").is(':checked'); 
	
	console.log("Check 2 : " + isChecked + " : " + SETTINGS_meCenter);
	if(SETTINGS_meCenter==0) {
		SETTINGS_meCenter = 1;
	} else {
		SETTINGS_meCenter = 0;
	}
	var isChk = (SETTINGS_meCenter==1 ? true : false);
	console.log("Check 2 : " + isChk + " : " + SETTINGS_meCenter);
	$("#chkMegISentrum").attr("checked",isChk).checkboxradio("refresh"); 
	
	saveProperties();
}

function toggleGpsShowOLDVERSION() {
	var domChk = $("#chkShowPosisition")[0];
	if(SETTINGS_enableLocation==0) {
		SETTINGS_enableLocation = 1;
	} else {
		SETTINGS_enableLocation = 0;
	}
	domChk.checked = (SETTINGS_enableLocation==1 ? true : false);
	saveProperties();
	updateGpsTimer(SETTINGS_enableLocation);
}


//Init show me choice
function initShowPosision() {
	updateGpsTimer(SETTINGS_enableLocation);
}


// See http://jquerymobile.com/test/docs/api/events.html

$('#home').live('pageinit',function(event){
    //console.log('Init farge');
    setColorInit();
});
$('#statistikk').live('pageinit',function(event){
    //console.log('Init farge');
    setColorInit();
});
$('#statistikk').live('pageshow',function(event){
    visParkStat();
});
 
$('#info').live('pageinit',function(event){
    //console.log('Init farge');
    setColorInit();
});

function setColorInit() {
	$("#selectedCol").css("background",SETTINGS_documentPageColor);
	$(".ui-page").css("background",SETTINGS_documentPageColor);
}
</script>
</head>

<body>
<div id="home" data-theme="b" data-role="page" style="width:100%; height:100%">
	<header id="header" data-theme="b" data-role="header" ><h1>P-hjelpen</h1>
		<a href="#" data-icon="gear" class="ui-btn-right"  id="showSettingsPane" onclick="showSettingsPane();">Vis oppsett</a>
		<a href="#" data-icon="gear" class="ui-btn-right"  id="hideSettingsPane" onclick="hideSettingsPane();" style="display:none">Skjul oppsett</a>
		<a href="#" class="ui-btn-left" onClick="javascript:centerAll();return false;">Zoom alt</a>
		
		<nav data-role="navbar">
			<ul>
				<li><a href="#" data-icon="home">Hjem</a></li>
				<li><a href="#statistikk" data-icon="grid" >Statistikk</a></li>
				<li><a href="#info" data-icon="info">Info</a></li>
			</ul>
		</nav>	
	</header>

	
	<content data-role="content" style="padding:0; width:100%; min-height: 100%; height:300px; overflow: hidden;margin: 0 auto;">
	
	<section id="settingsPane" style="display:none">	
		
		<input type="checkbox" id="chkShowPosisition"/>
		<label for="chkShowPosisition">Vis min posisjon&nbsp;</label>

		<input id="filterFlagCheckBox"  type="checkbox" name="filterFlagCheckBox" class="custom" />
		<label for="filterFlagCheckBox">Vis bare parkeringsplasser som har flere ledige plasser</label>

		<div id="filterSlider" style="display:none">
			<label for="slider-0">Minimum antall ledige parkeringsplasser:</label>
			<input id="parkIconFilterValue" type="range" name="slider" id="slider-0" value="25" min="1" max="50"  onchange="updateParkIconFilterValue(this.value)"/>
		</div>

		<input type="checkbox" id="chkMegISentrum"/>
		<label for="chkMegISentrum">Sentrer meg</label>
	
		<!--div data-role="fieldcontain">
			<fieldset data-role="controlgroup">
				<legend id="labelTheme">Velg tema:</legend>
				<select name="theme" id="theme">
					<option value="a" >Sort</option>
					<option value="b">Blå</option>
				</select>
			</fieldset>
		</div-->
		
		<div>
		<label for="selectedCol" style="display:inline-block;">Velg bakgr.farge:</label>
		<input id="selectedCol" class="xcolorpicker" readonly="readonly" onblur="javascript:setColor();" style="display:inline-block;width:100px"/>
		</div>
	<!--input name="colorpicker" type="color" onchange="newBackgroundColor(colorpicker.value);"-->
	
	<script type="text/javascript">
	$(function() { $('.xcolorpicker').wheelColorPicker({ dir: 'jquery.wheelcolorpicker', format: 'css', preview: true,  }); });
	function setColor() {
		var t3 = $('#selectedCol').css('background-color');
		$(".ui-page").css("background",t3);
		SETTINGS_documentPageColor = t3;
		saveProperties();
	}
	</script>
	</section>
		
	<!--div data-role="content" style="padding:0; width:100%; min-height: 100%; height:100%;position: relative;overflow: hidden;"-->	
		<div id="map_canvas" style="width:100%;min-height: 100%;"></div>
	</content>
	
	
	
	<footer data-role="footer" style=" position: absolute;bottom: 0px;left: 0px;">
	</footer>

</div>

<div data-role="page" data-theme="b" style="width:100%; height:100%" id="statistikk">
	<header data-role="header" data-theme="b" data-position="inline">
		<a href="#home" data-icon="arrow-l">Back</a>
		<h1>P-hjelpen</h1>
		
		<nav data-role="navbar">
			<ul>
				<li><a href="#home" data-icon="home">Hjem</a></li>
				<li><a href="#" data-icon="grid">Statistikk</a></li>
				<li><a href="#info" data-icon="info">info</a></li>
			</ul>
		</nav>	
	</header>
	
	<content data-role="content" style="width:98%;height:auto;">
		<span style="text-align:center">Prosentvis ledig kapasitet.</span> 
		<!--input type="button" class="button buttonRefresh" value="Oppdater" onClick="javascript:visParkStat();return false"/-->
		<div id="parkInfo"></div>
		<div id="fillerStats" style="width:99%;margins: 0 auto; height:100%">
			<canvas id="stats" class="stats" style="height:100%"></canvas>
		</div>
		<br/>
		<label id="debug2"></label>
		<!-- Hardkoding av parkeringer - dynamisk jquery ikke tatt med -->
		<nav data-role="controlgroup" data-type="horizontal" style="width:100%;" id="parkStatToggles">
			<a href="#" data-role="button" onClick="javascript:toggleActive('P1');" id="togP1" >P1</a>
			<a href="#" data-role="button" onClick="javascript:toggleActive('P2');" id="togP2" >P2</a>
			<a href="#" data-role="button" onClick="javascript:toggleActive('P3');" id="togP3" >P3</a>
			<a href="#" data-role="button" onClick="javascript:toggleActive('P4');" id="togP4" >P4</a>
		</nav>		
		
	</content>
	
</div>


<div id="info" data-role="page" data-theme="b" style="width:100%; height:100%" >
	<header data-role="header"  data-theme="b" data-position="inline">
		<a href="#home" data-icon="arrow-l">Back</a>
		<h1>P-hjelpen</h1>
		
		<nav data-role="navbar">
			<ul>
				<li><a href="#home" data-icon="home">Hjem</a></li>
				<li><a href="#statistikk" data-icon="grid">Statistikk</a></li>
				<li><a href="#" data-icon="info">Info</a></li>
			</ul>
		</nav>	
	</header>
	
	<content id="infoContent"><h1>Om Bergen Parkering AS</h1><p><strong>Bergen Parkering AS ble etablert den 1.1.2011 som følge av selskapsomdanningen av Bergen Parkering KF.</strong></p><p>Bergen Parkering KF ble avviklet pr 31.12.2010, og foretakets virksomhet ble delt i to.</p>
<p>Bergen Parkering AS ble opprettet for den delen av virksomheten som man  på delingstidspunktet forventet&nbsp; ville ligge utenfor enerettsområdet. Med "enerettsområdet" menes her den myndighet (politi) som det offentlige har til å sanksjonere feilparkering på offentlig veg. Virksomheten innenfor enerettsområdet ble lagt inn under Samferdselsetaten.</p>
<p>Drift av ByGarasjen, Klostergarasjen samt Nordnes P-hus og Solheim P-hus er Bergen Parkering AS sin hovedvirksomhet.</p>
	<details>
		<summary>Bruk av side</summary>
		<p>Hovedsiden viser et kart over parkingsplasser
		<br/>
		<strong>Zoom alt</strong> zoomer deg og parkeringsplassene inn på kartet.<br/>
		<strong>Vis oppsett</strong> gir deg mulighet til å aktivisere din posisjon, holde din posisjon sentrert i sentrum (fint når du kjører bil),
		filtrere på parkerininger og velge tema.<br/>
		<strong>Statistikk</strong> gir deg mulighet til å se hvor mye som er ledig over tid. Trykk på en søyle for å få prosentvis ledig kapasitet.<br/>
		<strong></strong>
		<strong>GPS ikon:</strong><br/>
		Nede til venstre er det et gps-ikon som viser status for innhenting av lokasjon.<br/>
		<img src="img/gno.png"> Ikke aktiv<br/> 
		<img src="img/gstart.png"> Oppstart<br/> 
		<img src="img/gok.png"> Ok<br/> 
		<img src="img/gerr.png"> Feil med innhenting (funksjonalitet for innhenting blir da slått av)<br/> 
		</p>
	</details>
	</content> 
	
</div>

<img id="gpsstat" class="gpsicon" src="img/gno.png">
</body>
</html>